<template>
  <el-table :data="tableData" stripe style="width: 90%">
    <el-table-column label="头像" width="150">
        <template #default="scope">
            <div class="demo-fit" v-if="scope.row.avatar != ''">
                <el-avatar :size="75" :src="scope.row.avatar" />
            </div>
            <div v-else>
                <el-avatar :icon="UserFilled"  style="width: 75px; height: 75px;"/>
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="name" label="用户名" width="180" />
    <el-table-column prop="email" label="邮箱" width="180" />
    <el-table-column prop="nickname" label="昵称" />
    <el-table-column prop="phone" label="电话号" />
    <el-table-column prop="sign" label="个人简介" />
    <el-table-column label="操作">
        <template #default="scope">
            <el-button type="warning" :icon="Edit" circle  @click="onDialog(scope.row.name)" :disabled="scope.row.name != data.username && data.username != 'admin'"/>
            <el-button type="danger" :icon="Delete" circle @click="onDdelete(scope.row.name)" :disabled="data.username != 'admin'"/>
        </template>
    </el-table-column>
  </el-table>
  <div style="display: flex; justify-content: center; margin: 30px 0;">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 50, 100]"
      background
      layout="sizes, prev, pager, next"
      :total="total"
      @size-change="SizeChange"
      @current-change="CurrentChange"
    />
  </div>

  <dialogv :showDia = "showDia" @showDiaf="showDiaf" :username="duser" title="管理员" @showusername="duser = ''"></dialogv>
</template>
<script lang='ts' setup>
import { ref, toRefs,reactive,onMounted } from "vue"
import { adminLoginListApi, adminDeleteApi } from "../composables/http"
import {
  Delete,
  Edit,
  UserFilled 
} from '@element-plus/icons-vue'
import dialogv from "../components/dialog.vue";
import { ElMessage  } from 'element-plus'

const data =reactive<{
    tableData: {
        avatar:string
        name: string
        email: string
        nickname: string
        phone: string
        sign: string
    }[],
    showDia:boolean,
    duser:string,
    username:string,
    pageSize:number,
    currentPage:number,
    total:number
}>({
    tableData: [
    ],
    showDia:false,
    duser:"",
    username:"",
    pageSize:10,
    currentPage:1,
    total:0,

})
onMounted(()=>{
    data.username = (window.localStorage.getItem('d_user')as string);
    onDataList()
})
const onDataList = async()=>{
    const d = await adminLoginListApi(data.currentPage,data.pageSize)
    if (d.code == 200){
        data.tableData = []
        data.total = (d.count)as number
        d.data.forEach(e => {
            data.tableData.push({
                "avatar":e.fields.avatar,
                "name": e.pk,
                "email": e.fields.email,
                "nickname": e.fields.nickname,
                "phone": e.fields.phone,
                "sign": e.fields.sign,
            })
        });
    }
}
const onDialog = (v:any)=>{
    data.duser = v
    data.showDia = true
}
const onDdelete = async(v:any)=>{
    const d = await adminDeleteApi(data.username, v)
    if(d.code == 200){
        ElMessage.error("删除成功" + d.username)
        onDataList()
    }
}
const showDiaf = (val:boolean)=>{
    data.showDia = val
    // console.log(data.showDia);
    onDataList()
}
const CurrentChange = ()=>{
    onDataList()
}
const SizeChange = ()=>{
    onDataList()
}
const { tableData, showDia, duser, pageSize, currentPage, total }= toRefs(data)
</script>
<style lang='scss' scoped>

</style>